<template>
  <div class="article-list">
    <!--  搜索表单start  -->
    <el-form
      :model="queryParams"
      :inline="true"
      v-show="showSearch"
      ref="queryForm"
    >
      <el-form-item label="文章标题" prop="articleTitle">
        <el-input
          v-model="queryParams.articleTitle"
          placeholder="请输入文章标题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="文章状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!--  搜索表单end  -->

    <!--  新增按钮和刷新按钮 start -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:menu:add']"
        >
          新增
        </el-button>
      </el-col>
      <table-tool :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!--  新增按钮和刷新按钮 end -->

    <!-- 表格 start -->
    <el-table v-loading="loading" :data="articleList" row-key="articleId">
      <el-table-column
        prop="articleTitle"
        label="文章标题"
        :show-overflow-tooltip="true"
        width="240"
      />
      <el-table-column prop="category" label="类别" width="120" />
      <el-table-column
        prop="status"
        label="状态"
        :formatter="statusFormat"
        width="80"
      />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <!-- 
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="showArticle(scope.row)"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="modifyArticle(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="deleteArticle(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end -->
    <!-- 分页插件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看文章详情 start -->
    <el-dialog
      :title="showTitle"
      :visible.sync="showOpen"
      width="800px"
      append-to-body
    >
      <div class="content markdown-body" v-highlight v-html="html">
        {{ html }}
      </div>
    </el-dialog>
    <!-- 查看文章详情 end -->
  </div>
</template>

<script>
import hljs from 'highlight.js' // 导入
import 'highlight.js/styles/atom-one-dark.css' // 设置样式
export default {
  name: 'ListArticle',
  data() {
    return {
      queryParams: {
        articleTitle: '',
        status: -1,
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      statusOptions: [
        {
          dictValue: 1,
          dictLabel: '发布'
        },
        {
          dictValue: 0,
          dictLabel: '草稿'
        },
        {
          dictValue: -1,
          dictLabel: '全部'
        }
      ],
      loading: false,
      //文章列表
      articleList: [
        {
          articleTitle: '测试',
          status: 1,
          createTime: '2020-11-09 18:00:00',
          category: 'Java'
        },
        {
          articleTitle: '测试2',
          status: 0,
          createTime: '2020-11-08 18:00:00',
          category: 'Java'
        }
      ],
      //总条数
      total: 2,
      //查看文章的标题
      showTitle: '',
      showOpen: false,
      html: `<p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p>
        <p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p>
        <p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p><p>请输入内容</p>
        <p>请输入内容</p><p>请输入内容</p><pre><code class="lang-language">public static </code></pre>`
    }
  },
  methods: {
    handleQuery() {},
    resetQuery() {
      this.$refs.queryForm.resetFields()
    },
    handleAdd() {
      console.log('新增按钮')
      this.$router.push({ path: '/article/addArticle' })
    },
    getList() {
      console.log('获取列表')
      this.loading = true
      /**
       * TODO 获取文章列表
       */
      this.loading = false
    },
    statusFormat(row, column) {
      console.log(row)
      if (row.status === 0) {
        return '草稿'
      } else if (row.status === 1) {
        return '发布'
      }
    },
    modifyArticle(row) {
      console.log(row)
      this.$router.push({ path: '/article/updateArticle' })
    },
    deleteArticle(row) {
      console.log(row)
      const title = row.articleTitle
      this.$confirm(`是否确认删除标题为${title}的文章?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log('删除按钮被点击')
        })
        .catch(() => {
          console.log('用户取消按钮')
        })
    },
    showArticle(row) {
      this.showTitle = row.articleTitle
      this.showOpen = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
